<template>
  <el-switch
    v-model="switchValue"
    v-bind="$attrs"
    :size="size"
    :loading="loading"
    :disabled="disabled"
    :active-text="activeText"
    :inactive-text="inactiveText"
    :active-value="activeValue"
    :inactive-value="inactiveValue"
    @change="handleChange"
  />
</template>

<script setup>
import { computed } from 'vue'
import { ElSwitch } from 'element-plus'

const props = defineProps({
  modelValue: [Boolean, String, Number],
  size: String,
  loading: Boolean,
  disabled: Boolean,
  activeText: String,
  inactiveText: String,
  activeValue: {
    type: [Boolean, String, Number],
    default: true
  },
  inactiveValue: {
    type: [Boolean, String, Number],
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const switchValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const handleChange = (value) => {
  emit('change', value)
}
</script>